<template>
  <div class="product-label">
    <el-card shadow="never" class="product-label-card">
      <el-form :inline="true">
        <el-form-item label="品牌名称">
          <el-input placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择状态">
            <el-option label="开启" :value=0></el-option>
            <el-option label="关闭" :value=1></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker class="brand-date-picker" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="label-addBand">
        <el-button type="primary" icon="el-icon-plus" size="mini" plain>新增</el-button>
        <el-row>
          <el-tooltip effect="dark" content="隐藏搜索" placement="top">
            <el-button icon="el-icon-search" circle></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle></el-button>
          </el-tooltip>

        </el-row>
      </div>
    </el-card>

    <el-card shadow="never">
      <el-table :data="list">
        
        <el-table-column label="品牌编号" prop="id" align="center"></el-table-column>
        <el-table-column label="品牌名称" prop="name" align="center"></el-table-column>
        
        <el-table-column label="品牌图片" align="center">
          <!-- 需要使用作用域插槽，获取当前行数据和index -->
          <template slot-scope="scope">
            <el-image :src="scope.row.picUrl" class="brand-img" lazy>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="品牌排序" prop="sort" align="center"></el-table-column>
        <el-table-column label="品牌描述" prop="description" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" align="center" :formatter="formatterStatus"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" :formatter="formatterCreateTime"
          width="auto"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="text" icon="el-icon-edit" size="small">修改</el-button>
          <el-button type="text" icon="el-icon-delete" size="small">删除</el-button>

        </el-table-column>
      </el-table>


      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total"
        background class="product-label-pagination">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { pageQueryBrandList } from "@/api/mall/product/brand";

export default {
  name: "ProductBrand",
  data() { 
    return {
      list: [],
      total:0
    }
  },
  methods: {
    handleSizeChange() { },
    handleCurrentChange() { },
    async getList() {
      const { data } = await pageQueryBrandList({
        pageNo: 1,
        pageSize: 5,
        name: "",
        status: "",
        createTime: [],
      });
      
      this.list = data.list;
      this.total = data.total;
    },
    formatterStatus(row,column) { 
      const statusCode = row[column.property];
      if (statusCode === 0) {
        return "开启";
      } else if (statusCode === 1) {
        return "关闭";
      } else { 
        return "未知状态";
      }
    },
    formatterCreateTime(row, column) { 
      const createTime = row[column.property];
      const date = new Date(createTime);

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return formattedDate;
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.product-label {
  padding: 20px;
}

.label-addBand {
  display: flex;
  justify-content: space-between;
}

.brand-date-picker{
  width: 250px;
}

.product-label-card{
  margin-bottom: 20px;
}
.product-label-pagination{
      display: flex;
      justify-content: right;
      margin-top: 20px;
}

.brand-img{
  max-width: 100px;
  max-height: 100px;
}
</style>